<template>
  <el-dialog
    width="500px"
    v-model="inDialogData.show"
    :title="inDialogData.title"
    class="companyFormDialog"
  >
    <el-form
      :model="data"
      label-width="auto"
      class="company-form"
      ref="form"
      :rules="Rules"
      label-suffix="："
    >
      <el-form-item prop="name" label="岗位名称">
        <el-input v-model="data.name" size="small"> </el-input>
      </el-form-item>
      <el-form-item prop="companyId" label="所属公司">
        <el-tree-select
          v-model="data.companyId"
          value-key="id"
          :data="companyData"
          check-strictly
          :render-after-expand="false"
          clearable
        >
          <template #default="{ data }">
            <el-option :label="data.name" :value="data.id" />
          </template>
        </el-tree-select>
      </el-form-item>
      <el-row :gutter="8">
        <el-col :span="16">
          <el-form-item prop="sort" label="排序">
            <el-input-number
              v-model="data.sort"
              :min="1"
              :max="999"
              size="small"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="enabled" label="激活">
            <el-checkbox v-model="data.enabled" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel" link>取消</el-button>
        <el-button
          type="primary"
          @click="submit"
          :loading="inDialogData.btnLoading"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    modelData: {
      type: Object,
      default: () => {},
    },
    dialogData: {
      type: Object,
      default: () => {},
    },
    companyData: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:modelData", "update:dialogData", "submit", "cancel"],
  computed: {
    data: {
      get() {
        return this.modelData;
      },
      set(value) {
        this.$emit("update:modelData", value);
      },
    },
    inDialogData: {
      get() {
        return this.dialogData;
      },
      set(value) {
        this.$emit("update:dialogData", value);
      },
    },
  },
  data() {
    return {
      Rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "change" }],
        companyId: [
          { required: true, message: "所属公司不能为空", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$emit("submit");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100%;
}
</style>
